<template>
	<view class="content">
		<top-login navTitle="Shop"></top-login>

		<view class="navs">
			<view class="titles  " :class="{active:current==0}" @click="changeTab(0)">商家活动</view>
			<view class="titles " :class="{active:current==1} " @click="changeTab(1)">我参加的活动</view>
		</view>
		<view style="color: #7677EB;font-size: 28rpx;text-align: center;margin-top: 36rpx;" @click="go">
			了解商家活动详情
		</view>

		<merchantActivities ref="activityRef" v-if="current==0"></merchantActivities>
		<joinActivities v-else ref="actiRef"></joinActivities>
		<u-toast ref="uToast"></u-toast>
		<view class="add" @click="goAdd()">
			<image src="@/static/icon/add.png"></image>
		</view>
	</view>
</template>

<script>
	import topLogin from '@/components/topLog.vue'
	import merchantActivities from './components/merchantActivities.vue'
	import joinActivities from './components/joinActivities.vue'
	import {
		getRawUserInfo
	} from '@/api/user.js'
	
	export default {
		components: {
			topLogin,
			merchantActivities,
			joinActivities
		},
		data() {
			return {
				list: [],
				current: 0,
			};
		},
		onLoad() {
			getRawUserInfo().then(res => {
				if (1 == res.code) {
					this.userRawData = res.data
					this.$u.vuex('vuex_user.is_shop', res.data.is_shop)
					this.$u.vuex('vuex_user.shop_end_time', res.data.shop_end_time)
					
					let endDate = new Date(this.vuex_user.shop_end_time)
					let currentDate = new Date()
					
					if (this.vuex_user.is_shop < 1 || endDate < currentDate ) {
					    uni.redirectTo({
					        url: '/pages/activity/login'
					    })
					}
				}
			});
		},
		onShow() {
			// this.getList();
			if (this.$refs.activityRef) {
				this.$refs.activityRef.getList()
			}
		},
		onReachBottom() {
			if (this.current == 1) {
				this.$refs.actiRef.loadmore();
			}
		},
		methods: {
			changeTab(type) {
				if (this.current == type) return
				this.current = type
			},
			getList() {
				this.$API.getActivityList().then(res => {
					this.list = res.data;
				})
			},
			goInfo(item) {
				uni.navigateTo({
					url: '/pages/activity/info?id=' + item.id
				})
			},
			goAdd() {
				uni.navigateTo({
					url: '/pages/activity/add_activity'
				})
			},
			goEdit(item, type) {
				if (item.status == 1) {
					if (type == 2) {
						uni.navigateTo({
							url: '/pages/activity/info?id=' + item.id
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							title: '失败主题',
							message: "活动目前是上线状态，请先下线后再进入编辑",
						});
					}
					return;
				}
				uni.navigateTo({
					url: '/pages/activity/add_activity?id=' + item.id
				})
			},
			setStatus(item) {
				let that = this
				uni.showModal({
					content: '确认' + (item.status == 1 ? '下线' : '上线') + '吗？',
					success: function(res) {
						if (res.confirm) {
							that.$API.setStatus({
								id: item.id
							}).then(res => {
								item.status = item.status == 1 ? 0 : 1;
							})
						}
					}
				})
			},
			setDel(item) {
				let that = this;
				if (item.order_count > 0) {
					uni.showToast({
						title: '活动已有支付订单，不可删除',
						icon: 'none'
					})
					return false;
				}

				uni.showModal({
					content: '确认删除吗？',
					success: function(res) {
						if (res.confirm) {
							that.$API.setDel({
								id: item.id
							}).then(res => {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								this.page = 1;
								that.getList();
							})
						}
					}
				})
			},
			goOrder(item) {
				uni.navigateTo({
					url: '/pages/activity/order?id=' + item.id
				})
			},
			go(){
				uni.navigateTo({
					url:'/pages/index/web?type=About'
				})
			}
		}
	}
</script>

<style lang="scss">
	.navs {
		display: flex;
		margin-top: 36rpx;

		.titles {
			width: 332rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #0A1629;

			&.active {
				background: #7677EB;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				color: #fff;
			}
		}
	}

	.txtImg {
		position: absolute;
		bottom: 0;
		width: 88%;
		padding: 0 6%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100rpx;
		border-radius: 0 0 48rpx 48rpx;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #31353D 100%);


	}

	.content {
		min-height: 100vh;
		margin: 0 36rpx;
		padding-bottom: 36rpx;
		@include flex(column);


		.title {
			height: 48rpx;
			font-size: 40rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #110202;
			line-height: 48rpx;
			margin-top: 36rpx;
		}

		.list {
			@include flex(column);

			.item {
				@include flex(column);
				height: 408rpx;
				background-color: #FFFFFF;
				padding: 16rpx;
				margin-top: 36rpx;
				border-radius: 48rpx;
				box-shadow: 0 12rpx 116rpx 0 rgba(196, 203, 214, 0.10);

				.s1 {
					position: relative;
					width: 100%;
					height: 336rpx;

					image {
						width: 100%;
						height: 336rpx;
						border-radius: 48rpx;
					}

					.c1 {
						margin-bottom: 16rpx;
						height: 32rpx;
						font-size: 32rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 32rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						// mix-blend-mode: difference;
					}

					.c2 {
						height: 24rpx;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 24rpx;
					}
				}

				.s2 {
					@include flex;
					justify-content: space-between;

					.c1 {
						width: 100%;
						height: 35rpx;
						text-align: center;
						margin-top: 28rpx;
						position: relative;

						image {
							width: 30rpx;
							height: 33rpx;
						}

						.text {
							position: absolute;
							left: 50%;
							top: -19rpx;
							height: 28rpx;
							background-color: #FF5B5B;
							font-size: 20rpx;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 28rpx;
							padding: 0 8rpx;
							border-radius: 20rpx;
						}
					}
				}
			}
		}

		.empty {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.add {
			position: fixed;
			width: 184rpx;
			height: 184rpx;
			right: 16rpx;
			bottom: 370rpx;

			image {
				width: 184rpx;
				height: 184rpx;
			}
		}

	}
</style>